<!--
@Descripttion 日期选择
@Author Bell
@Date 2021-11-16
@LastEditors Bell
@LastEditTime 2021-11-16
@property {String}    type         String  默认值(date)    日期类型 year/month/date/dates/datetime/week/datetimerange/daterange/monthrange
@property {String}    format       String  默认值('')      日期格式-显示 如value-format中有值则默认相同
@property {String}    value-format String  默认值('')      日期格式-值 YYYY-MM-DD HH:mm:ss
@property {String}    width        String  默认值(200px)   输入框宽度(样式中限制：日期范围年月日宽度最小220px，日期范围年月日时分秒最小350px)
@property {String}    disabled     Boolean 默认值(false)   是否失效
@property {String}    placeholder  String  默认值(选择日期) 默认占位文本 (范围型此项不生效)
@example <JYDate v-model="xxx" />
 -->
<template>
  <view >
    <el-date-picker
      v-model="value"
      @change="changeVal"
      :type="type"
      :format="format ? format : valueFormat"
      :value-format="valueFormat"
      :style="`width: ${width}`"
      :disabled="disabled"
      :placeholder="placeholder"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      unlink-panels
    ></el-date-picker>
  </view> 
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import mixin from './mixin-input'

export default defineComponent({
  name: 'jy-date',
  props: {
    modelValue: {
      required: true
    },
    // 范围类型 daterange | monthrange
    rangeType: {
      type: String,
      default: 'date'
    },
    // 日期类型 year/month/date/dates/datetime/week/datetimerange/daterange/monthrange
    type: {
      type: String,
      default: 'date'
    },
    // 日期格式-显示
    format: {
      type: String,
      default: ''
    },
    // 日期格式-值
    valueFormat: {
      type: String,
      default: ''
    },
    // 输入框宽度
    width: {
      type: String,
      default: '200px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default: '选择日期'
    }
  },
  emits: ['input', 'update:modelValue'],
  setup (props, context) {
    // mixins 混入
    const { value, changeVal } = mixin(props, context)
    
    return {
      value,
      changeVal
    }
  }
})
</script>
<style lang="less" scoped>
  .el-date-editor :deep(.el-range-separator){
    width: auto;
    padding: 0;
  }
  :deep(.el-range-editor.el-input__inner){
    padding-right: 0;
  }
  :deep(.el-date-editor--daterange){
    min-width: 220px;
  }
  :deep(.el-date-editor--datetimerange){
    min-width: 350px;
  }
</style>
